<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from "vue-router";
import { login } from "../../apis/user";


let username='';

const loginFormRef = ref();
const router = useRouter();
const formData = reactive({
  form: {
    username: 'aaaa',
    password: '123456',
  },
  rules: {
    username: [
      {
        required: true, // 是否必填
        message: "必须输入用户名",
        trigger: "blur",
      },
      { min: 3, max: 20, message: "长度为[3-20]", trigger: "blur" },
    ],
    password: [
      {
        required: true,
        message: "必须输入密码",
        trigger: "change",
      },
      { min: 3, max: 20, message: "长度为[3-20]", trigger: "blur" },
    ],
  },

})


const register = () => {
  router.push({ name: 'register' });
  console.log(router);
  console.log("aaaaaaa");

}

// 登录功能
const onSubmit = async () => {
  console.log(formData.form);
  const valid = await loginFormRef.value.validate();

  if (!valid) {
    return false;
  }

  try {
    const res = await login(formData.form.username, formData.form.password);
    console.log(res);
    // 响应成功的处理
    if (res.data.code === 200) {
      const jsonData = JSON.parse(res.data.data);

      console.log(jsonData.username);
      console.log(jsonData.url);
      console.log(jsonData.auth);
      username = jsonData.username;
      console.log(username);
      if (jsonData.auth === '0') {
        router.push({ name: 'admin' });

      } else {
        router.push({ name: 'home',
        query: {
      username: username

    } });
        cookie.set('username',jsonData.username);
      }



    } else {
      alert(res.data.msg);
    }

  } catch (err) {
    console.log(err);
    // 响应失败的处理
  }
};

</script>
<template>
  <el-form ref="loginFormRef" :model="formData.form" :rules="formData.rules" class="from">
    <span>登录</span>
    <el-form-item label="" class="item" prop="username">
      <el-input v-model="formData.form.username" placeholder="请输入用户名" class="input"></el-input>
    </el-form-item>
    <el-form-item label="" class="item" prop="password">
      <el-input v-model="formData.form.password" placeholder="请输入密码" class="input" type="password"></el-input>
    </el-form-item>

    <el-form-item class="item">
      <el-button type="primary" round class="button" @click="onSubmit">登录</el-button>
      <el-button type="primary" round class="button" @click="register">注册</el-button>
    </el-form-item>

  </el-form>
</template>
<style scoped>
.from {
  width: 480px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 3px lightgray;
  padding: auto;
  border-radius: 10px;
  position: absolute;
  left: 35%;
  top: 35%;
  box-shadow: 5px 5px 5px #cdcfcf;
}

.from .item {
  width: 300px;
  margin-top: 20px;
  /* border: solid 1px lightgray; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.from .item .input {

  border-radius: 15px;
}

.from .item .button {
  width: 110px;
  position: relative;
  left: 30px;


}
</style>